<template>
  <div class="lsc-find">
    <!-- <mt-header title="找服务"></mt-header> -->
    
    <div class="lsc-find-box">
      <p>
        感谢您使用大管家，请填写一下信息，以便于我们能更快更精准的为您提供服务。
      </p>
      <mt-field 
        label="姓名" 
        placeholder="请输入联系人姓名" 
        v-model="employer.name" />
      <mt-field 
        label="联系手机" 
        placeholder="请输入联系人电话" 
        type="tel" 
        v-model="employer.mobileno" 
        :attr="{ maxlength: 11 }"/>
      <mt-field 
        label="服务需求" 
        placeholder="请选择您的服务需求" 
        disabled 
        v-model="employerDemand" 
        @click.native="popupVisible=true">
        <i class="mint-cell-allow-right" style="width: 40px; display: inline-block;"></i>
      </mt-field>
      <mt-field 
        label=" " 
        placeholder="请输入您的服务需求" 
        v-if="showDemand" 
        v-model="employer.service_demand" />
    </div>
    <div class="lsc-find-button">
      <mt-button type="primary" style="width: 60%;" @click="onClickSave">提交</mt-button>
    </div>
    
    <!-- 服务需求 -->
    <mt-popup v-model="popupVisible" position="right" class="mint-popup-3" :modal="false">
      
      <mt-header title="服务内容">
        <mt-button slot="left" icon="back" @click.native="popupVisible=false"></mt-button>
        <mt-button slot="right" @click.native="onPopupFindService">确定</mt-button>
      </mt-header>
      <mt-radio
        align="right"
        v-model="findSericeCon"
        :options="findSericeItem">
      </mt-radio>
      <mt-radio
        align="right"
        v-model="findSericeCon"
        :options="['其他']">
      </mt-radio>
    </mt-popup>
  </div>
</template>

<script>

import api from '../api';

export default {
  name: 'find',
  data () {
    return {
      findSericeItem:[],
      findSericeCon:'',
      employer: {
        openid: localStorage.openId,
        name: '',
        mobileno:'',
        service_demand:''
      },
      employerDemand:'',
      showDemand: false,
      popupVisible: false
    }
  },
  created() {
    this.getFindServiceItem()
  },
  methods: {
    getFindServiceItem() {
      this.axios.get(api.masterData.ServiceContents)
        .then(res=>{
          this.findSericeItem = res.data.data
        })
    },
    onPopupFindService() {
      if(this.findSericeCon === '其他') {
        this.employerDemand = '其他'
        this.employer.service_demand = ''
        this.showDemand = true
      }else {
        // 隐藏其他服务输入框
        this.showDemand = false
        this.findSericeItem.forEach((val)=>{
          if(val.value === this.findSericeCon) {
            this.employerDemand = this.employer.service_demand = val.label
          }
        })
      }
      this.popupVisible = false
    },
    onClickSave() {
      
      //提交成功返回公众号
      let validEmployer = this.validEmployer(); 
      if (validEmployer) return;

      this.postEmployer()
    },
    postEmployer() {
      this.$indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });
      this.axios.post(api.employer.CommitDemand, this.employer)
        .then(res=>{
          this.$indicator.close();
          if (res.data.retcode != 0) {
            this.$toast({
              message: res.data.retmsg,
              position: 'bottom'
            })
          }else {
            //关闭当前窗口，回到公众号
            this.$toast({
              message: '您的需求已提交成功，大管家客服会尽快联系您确认需求！',
              position: 'bottom',
              duration: 3000
            });
            setTimeout(()=>{
              WeixinJSBridge.call("closeWindow")
            }, 3500)
            
          }
        })
    },
    validEmployer() {
      if(!this.employer.name) {
        this.$toast('联系人姓名不能为空！')
        return true;
      }
      if(!this.employer.mobileno) {
        this.$toast('请填写正确的11位手机号码！')
        return true;
      }else if(new RegExp("^((1[0-9]))[0-9]{9,9}$").test(this.employer.mobileno) == false){

        this.$toast('请填写正确的11位手机号码！')
        return true;

      }
      if(!this.employer.service_demand) {
        this.$toast('服务需求不能为空！')
        return true;
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.lsc-find-button {
  width: 100%;
  position: fixed;
  bottom: 60px;
  text-align: center;
}
.lsc-find-button span {
  display: block;
  padding-top: 10px;
}
.lsc-find-button>span>label>a {
  color: #26a2ff;
  text-decoration: none;
}
.mint-popup-3 {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
/* .lsc-find-box {
  padding: 20px 0;
  background: #fff;
} */
.lsc-find-box>p {
  background: #848484;
  color: #fff;
  padding: 10px;
  margin-bottom: 10px;
  line-height: 25px;
}
</style>
<style>
.lsc-find .mint-cell-value input {background: #fff;}
.lsc-find .mint-radiolist-title {margin:0}
</style>
